<template>
  <div id="PieChart">
    <div ref="chart01" class="chart01"></div>
  </div>
</template>

<script>
export default {
  name: "Category",
  components: {},
  props: {
    Etitle: String,
    PieData: Array | Object
  },
  data() {
    return {
        colorList: [
        "#f3ac62", "#f89448", "#f18b6a","#f06c44", "#fd9254","#f3ac62", "#f89448", "#f18b6a","#f06c44", "#fd9254"
      ],
    };
  },
  computed: {},
  watch: {
    PieData: function(newVal,oldVal){
      this.drawChart01()
    }
  },
  created() {},
  mounted() {
    this.drawChart01();
  },

  methods: {
    // 绘制图表
    drawChart01() {
      let that = this;
      let myChart1 = that.$echarts.init(that.$refs.chart01);
      let option = {
        color: that.colorList,
        // title: {
        //     text: this.Etitle,
        //     left: 'center',
        //     // top: 10,
        //     textStyle: {
        //         color: '#555',
        //     }
        // },
        tooltip: {
          trigger: "item",
            formatter: '{a} </br>{b} : {d}%'
        },
        series: [
        {
            name: this.Etitle,
            type: 'pie',
            // radius: [30, 110],
            radius: ["30%", "50%"],
            center: ['50%', '50%'],
            // roseType: 'area',
            data: that.PieData,
            // .sort((a,b)=>{
            //     return a.value - b.value
            // })
            label: {
              //   position: "center",
              formatter: " {b|{b}}: {d}%",
              borderColor: "#aaa",
              avoidLabelOverlap: true,
              rich: {
                b: {
                  fontSize: 12,
                  lineHeight: 33,
                  color: '#555'
                },
                d: {
                  align: "center",
                  color: '#555'
                },
              },
            },
        }
    ]
      };
      myChart1.setOption(option);
      /*窗口自适应，关键代码*/
      setTimeout(function () {
        window.addEventListener("resize", function () {
          myChart1.resize();
        });
      }, 200);
    },
  },
};
</script>
<style lang='less' scoped>
#PieChart {
  width: 100%;
  height: 100%;
  // margin-top: 30px;
  .chart01 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    clear: both;
  }
}
</style>
